<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
        margin: 50px;
      }
      .container {
        width: 100px;
        height: 2000px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <!-- <button>按钮</button> -->
    <div class="box"></div>
    <div class="container"></div>
    <script>
      // 1.BOM 2.DOM 3.event : 事件
      // 事件 ： event ；三个内容 1.事件源 2.事件类型 3. 事件函数；4.修饰符（可有可无）
      // var btn = document.querySelector("button");
      // // 1.btn 是事件源 2.事件类型click 3.事件函数 (事件函数会事件触发之后自动执行) 4.修饰符 on
      // var fn = function(){
      //     console.log("fn")
      // }
      // btn.onclick = fn;

      // 一、事件里的this 会指向事件源 ；
      // var btn = document.querySelector("button");
      // btn.onclick = function(){
      //     console.log(this);
      //     setTimeout(function(){
      //         console.log(this);
      //     }, 1000);
      // }

      // 二、事件函数不能重复绑定；
      // var btn = document.querySelector("button");
      // btn.onclick = function(){
      //     console.log("fn1");
      // }
      // btn.onclick = function(){
      //     console.log("fn2");
      // }
      // var a = 10;
      // var a = 20;

      // 三、事件对象，事件触发的时候 js会提供一内置对象来描述事件的相关信息；
      // 比如：事件类型 ，点击坐标 ，按键类型....
      //    var ele =  document.querySelector(".box");
      //    ele.onclick = function(e){
      //        console.log("点击了box方块",e);
      //    }

      //    1.事件类型 type  2.button 0.鼠标左键 1.滚轮 2.鼠标右键
      // 注意： 事件对象里的几个坐标
      // 一、相对于自身的x 和 y 坐标offsetX/offsetY
      // 触发事件的时候 offsetX：鼠标相对于事件源的x坐标
      //               offsetY：鼠标相对于事件源的Y坐标
      // var ele =  document.querySelector(".box");
      // ele.onclick = function(e){
      //       console.log(e.offsetX);
      //     //   console.log(e.offsetY);
      //    }

      // 二、相对于浏览器的x和y的坐标
      // clientX: 相对于浏览器的左边的坐标
      // clientY：相对于浏览器的上边的坐标
      // var ele =  document.querySelector(".box");
      // ele.onclick = function(e){
      //     //   console.log(e.offsetX);
      //     console.log(e.clientX);
      //     console.log(e.clientY);
      //    }

      // 三 、相对于页面的 x 和y的坐标
      // pageX： 相对于页面的左边的距离
      // pageY：相对于页面的上边的距离坐标；
      var ele = document.querySelector(".box");
      ele.onclick = function (e) {
        //   console.log(e.offsetX);
        console.log("相对浏览器", e.clientY);
        console.log("相对于页面", e.pageY);
      };

      //    总结 ：一、事件分三个部分 ：1.事件源 2.事件类型 3.事件函数；
      // 二、事件对象
      // 几个坐标 ： 1.相对于自身的x和y  offsetX 、offsetY
      // 2 。 相对于浏览器的x和y  clientX、clientY
      // 3.相对于页面的x 和y pageX 和pageY
      // 4.offsetWidth 和offsetHeight ： 自身+内边距+边框
      // 5.clientWidth和clientHeight ： 自身+内边距
      // 6.offsetLeft 和offsetTop ：1.没有定位相对于页面的左边偏移量和上边
      // 2.有定位 相对于定位父级的左偏移量和上边偏移量
      // 7.clientLeft 和clientTop ：边框的宽度；
      // drag
    </script>
  </body>
</html>
